<template>
  <el-dialog title="协作者分配账户详情" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" width="80%" append-to-body>
    <div class="group-right">
      <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
    </div>
    <el-table :data="tableDataList"
              ref="allTableData"
              class="tableHightClass"
              :max-height="tableHeight"
    >
      <el-table-column :label="item.label"
                       align="center"
                       v-for="(item,index) in tableColumns"
                       :prop="item.key"
                       v-if="item.visible?item.visible:true"
                       :min-width="item.minWidth ?item.minWidth :``"
                       :fixed="item.fixed?item.fixed:false"
                       :show-overflow-tooltip="true"

      >
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
    <div slot="footer" class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">我知道了</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reqGetListById,reqAssistUserIndexExport } from '@/api/coordinateMgt/index'

export default {
  name: 'viewCoordinate',

  data() {
    return {
      total: 8,// 表格的总条数
      tableHeight: 300,
      queryParams: {
        page: 1,
        num: 10,
        to_custom_id: this.$attrs.id,
        start: null,
        end: null
      },
      timeRange: [],
      tableDataList: [],
      tableColumns: [
        { key: 'mobile', label: `主账号/手机号`, minWidth: 200 },
        { key: 'id', label: `主账号ID`, minWidth: 120 },
        { key: 'roleName', label: `账户角色`, minWidth: 120 },
        { key: 'tocustom_user_login', label: `协作者账号`, minWidth: 120 },
        { key: 'effectiveTime', label: `协作者有效期`, minWidth: 120 },
        { key: 'remark', label: `协作者备注`, minWidth: 120 },
        { key: 'today_coin', label: `今日充值金额`, minWidth: 120 },
        { key: 'all_coin', label: `累计充值总金额`, minWidth: 120 },
        { key: 'today_use_score', label: `今日消耗广告币`, minWidth: 120 },
        { key: 'custom_score', label: `剩余广告币`, minWidth: 120 },
        { key: 'status_name', label: `状态`, minWidth: 120 },

      ],
      exportColumns: [
        { key: 'custom.mobile', label: `主账号/手机号`},
        { key: 'custom.id', label: `主账号ID`, },
        { key: 'role.roleName', label: `账户角色`},
        { key: 'tocustom.user_login', label: `协作者账号` },
        { key: 'start_time', label: `协作者有效期（开始）` },
        { key: 'end_time', label: `协作者有效期（结束）` },
        { key: 'remark', label: `协作者备注` },
        { key: 'more.today_coin', label: `今日充值金额` },
        { key: 'more.all_coin', label: `累计充值总金额` },
        { key: 'more.today_use_score', label: `今日消耗广告币` },
        { key: 'more.custom_score', label: `剩余广告币`},
        { key: 'status_name', label: `状态` },

      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    //重置表单
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //审核的列表
    getList() {
      this.loading = true
      if (this.$attrs.timeRange && this.$attrs.timeRange.length > 0) {
        this.queryParams.start = this.$attrs.timeRange[0]
        this.queryParams.end = this.$attrs.timeRange[1]
      } else {
        this.queryParams.start = null
        this.queryParams.end = null
      }
      this.tableDataList = []
      reqGetListById(this.queryParams).then(res => {
        this.tableDataList = res.data.list
        this.tableDataList.forEach(item => {
          item.today_coin = item.more.today_coin //充值金额
          item.all_coin = item.more.all_coin //累计充值总金额
          item.custom_score = item.more.custom_score//剩余广告币
          item.today_use_score = item.more.today_use_score //今日实时消耗（广告币）
          item.mobile = item.custom.mobile //角色账户
          item.id = item.custom.id//角色id
          item.roleName = item.role.roleName
          item.tocustom_user_login = item.tocustom.user_login
          if (item.start_time && item.end_time) {
            item.effectiveTime = item.start_time + '~' + item.end_time
          } else {
            item.effectiveTime = '不限'
          }
        })
        this.total = res.data.count
        this.loading = false
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      let form = JSON.parse(JSON.stringify(this.queryParams))
      let head = []
      let keys = [];
      let timeindex = this.tableColumns.findIndex((sitem) => {
        return sitem.label == '协作者有效期';
      });
      this.exportColumns.forEach(item => {
        this.tableColumns.forEach((sitem, sindex) => {
          if (sitem.label == '协作者有效期') {
            if (head.indexOf('协作者有效期(开始)') == -1) {
              head[timeindex] = '协作者有效期(开始)';
            }
            if (head.indexOf('协作者有效期(结束)') == -1) {
              head[timeindex + 1] = '协作者有效期(结束)';
            }
            if (keys.indexOf('start_time') == -1) {
              keys[timeindex] = 'start_time';
            }
            if (keys.indexOf('end_time') == -1) {
              keys[timeindex + 1] = 'end_time';
            }
          } else {
            if (sitem.label == item.label) {
              let headIndex = head.findIndex(vitem => {
                return vitem == item.label;
              });
              let keyIndex = keys.findIndex(vitem => {
                return vitem == item.key;
              });
              if (headIndex == -1) {
                if (timeindex < sindex) {
                  head[sindex + 1] = item.label;
                }
                if (timeindex > sindex) {
                  head[sindex] = item.label;
                }

              }
              if (keyIndex == -1) {
                if (timeindex < sindex) {
                  keys[sindex + 1] = item.key;
                }
                if (timeindex > sindex) {
                  keys[sindex] = item.key;
                }

              }
            }
          }

        })
      });
      head = head.filter(item => item);
      keys = keys.filter(item => item);
      form.head = head
      form.keys = keys
      delete form.page
      delete form.num
      reqAssistUserIndexExport(form).then((res) => {
        console.log('333', res)
        if (res.code == 1) {
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.download = '协同管理详情数据.xls'
          a.href = res.data
          a.click()
          document.body.removeChild(a)
        }

      })

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: calc(100vh - 250px);
}

.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;

}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
</style>
